/**
 * 立即执行函数
 */
(function () {
  const container = document.querySelector('.container');

  const btn = document.querySelector('.btn3');

  // 创建一个1到10000的数组
  const array = Array.from({ length: 10000 }, (v, k) => k + 1);
  // 给btn 按钮天际是点击事件，点击后添加10000 个li
  btn.addEventListener('click', () => {
    performChunk(array, taskHandler);
  });

  /**
   * 任务处理
   * @param {*} index
   */
  function taskHandler(index) {
    const li = document.createElement('li');
    li.innerText = array[index];
    console.log('执行任务', array[index]);
    container.appendChild(li);
  }

  /**
   * 封装分时函数
   */
  function performChunk(datas, taskHandler) {
    if (datas.length === 0) {
      return;
    }
    // 当前下标
    let i = 0;
    // 执行下一个任务
    function _run() {
      if (i > datas.length) {
        return;
      }

      requestIdleCallback((idle) => {
        console.log('执行下一个任务');
        while (idle.timeRemaining() > 0 && i < datas.length) {
          taskHandler(i, datas[i]);
          i++;
        }
        idle.timeRemaining() <= 0 && _run();
      });
    }
    _run();
  }
})();
